<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>扇形导航</title>
		<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>
		<style type="text/css">
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.wrap{
				width: 60px;
				height: 60px;
				/* 固定定位 */
				position: fixed;
				right: 10px;
				bottom: 10px;
			}
			.wrap > .inner{
				height: 100%;
			}
			.wrap > .inner > img{
				position: absolute;
				left: 0;
				top: 0;
				margin: 10px;
			}
			.wrap > .home{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				border: 1px #8C8C8C solid;
				background: url(img/fengche.png) no-repeat white;
				border-radius: 15px;
				box-shadow:2px 2px 2px #8C8C8C;
				
				transition: 2s;
			}
			/* .wrap > .home:hover{
				transform: rotate(360deg);
			} */
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="inner">
				<img src="exercise/img/fb.png" width="40px">
				<img src="exercise/img/in.png" width="40px">
				<img src="exercise/img/rss.png" width="40px">
				<img src="exercise/img/yt.png" width="40px">
				<img src="exercise/img/tw.png" width="40px">
			</div>
			<div class="home"></div>
		</div>
	</body>
	<script type="text/javascript">
		
		/**
		 * 过渡：
		 * 1.在元素首次渲染还没有完成的情况下，是不会触发过渡的
		 * 2.在绝大部分变换样式切换时，如果变换函数的位置,个数不相同，也不会触发过渡
		 */
		window.onload = function(){
			var home = document.querySelector(".wrap > .home");
			var imgs = document.querySelectorAll(".wrap > .inner > img");
			var imgsLength = imgs.length;
			var flag = true;
			var c = 140;
			/**
			 * 点击展开收起
			 */
			home.onclick = function(){
				if(flag){//顺时针
					this.style.transform = "rotate(-360deg) scale(1)";
					
					for (var i = 0; i < imgsLength; i++) {
						imgs[i].style.left = -getPoint(c,90*i/(imgsLength-1)).left+"px";
						imgs[i].style.top = -getPoint(c,90*i/(imgsLength-1)).top+"px";
						imgs[i].style.transition = (1+i*0.35)+"s";
						imgs[i].style.transform = "rotate(-360deg) scale(1)";
					}
				}else{//逆时针
					this.style.transform = "rotate(0deg) scale(1)";
					for (var i = 0; i < imgsLength; i++) {
						imgs[i].style.left = 0+"px";
						imgs[i].style.top = 0+"px";
						imgs[i].style.transition = (imgsLength-i)*0.35+"s";
						imgs[i].style.transform = "rotate(0deg) scale(1)";
					}
				}
				flag = !flag;
			}
			
			/**
			 * 已知第三边和一个角
			 * 1.勾股定理
			 * 2.三角函数
			 * 3.角度与弧度的转换
			 */
			function getPoint(c,deg){
				var x = Math.round(c*Math.sin(deg*Math.PI/180));
				var y = Math.round(c*Math.cos(deg*Math.PI/180));
				return {left:x,top:y};
			}
			
			/**
			 * 展开的几个按钮的点击事件
			 * 之所以transform用组合，因为如果只是使用scale，而点击展开时是rotate，
			 * 前后不一样，会导致之后的一些效果transform不会被触发
			 */
			for (var i = 0; i < imgsLength; i++) {
				imgs[i].onclick = function(){
					this.style.transform="rotate(-360deg) scale(2)";
					this.style.opacity=0.1;
					//因为上面展开收起时，已经处理了img的transition,这里要重置
					this.style.transition = 1+"s";
					this.addEventListener("transitionend",transEnd);
				}
			}
			function transEnd(){
				this.style.transform="rotate(-360deg) scale(1)";
				this.style.opacity=1;
				this.style.transition = 0.3+"s";
				
				this.removeEventListener("transitionend",transEnd);
			}
			
		}
	</script>
</html>
